<html>
<head>
  <meta charset="UTF-8">
  <title>后台登录-X-admin2.2</title>
  <link rel="stylesheet" href="/xadmin/css/font.css">
  <link rel="stylesheet" href="/xadmin/css/xadmin.css">
  <script src="/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="/xadmin/js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
     onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <form class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input class="layui-input" autocomplete="off" placeholder="开始日" name="start"
                     id="start">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                     class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>
              </button>
            </div>
          </form>
        </div>
        <div class="layui-card-header">
          <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
          </button>
          <button class="layui-btn" onclick="xadmin.open('添加用户','./member-add.html',600,400)"><i
              class="layui-icon"></i>添加
          </button>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">
          <!--content-->
          <table id="peopleTable" lay-filter="peopleTable"></table>
        </div>
        <div class="layui-card-body ">
          <div class="page">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="barTool">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script>
  layui.use(['layer', 'form', 'table'], function () {
    var layer = layui.layer
    var table = layui.table
    var form = layui.form

    //第一个实例
    table.render({
      elem: '#peopleTable'
      , height: 400
      , url: '/admin/getPeopleList' //数据接口
      , page: true //开启分页
      , cols: [
        [ //表头
          {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
          , {field: 'name', title: '用户名', width: 100, sort: true}
          , {field: 'username', title: '账号', width: 120, sort: true}
          , {field: 'sex', title: '性别', width: 60, sort: true}
          , {field: 'birthday', title: '生日', width: 200, sort: true}
          , {
          field: 'status', title: '状态', width: 80, sort: true, templet: function (data) {
            if (data.status == 1) {
              return '<span>有效</span>'
            } else {
              return '<span style="#FF5722">无效</span>'
            }
          }
        }
          , {field: 'createTime', title: '注册日期', width: 200, sort: true}
          , , {fixed: 'right', width: 220, align: 'center', toolbar: '#barTool'}
        ]
      ]
      , parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.count, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
      , limits: [10, 20, 50]
    });

    //监听工具条
    table.on('tool(peopleTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if (layEvent === 'detail') { //查看
        //do somehing
      } else if (layEvent === 'edit') { //编辑
        //do something
        layer.open({
          type: 2,
          area: ['350px', '300px'],
          content: ['/admin/iframeEdit?username='+data.username, 'no'],
          end: function(){
            location.reload()
          }
        });
      }
    });

    //监听提交
    form.on('submit(formDemo)', function (data) {
      layer.msg(JSON.stringify(data.field));
      // $.ajax({
      //   url:'',
      //   type:'post',
      //   success(data){
      //
      //   }
      // })
      return false;
    });
  });
</script>
</html>
